<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录界面</title>
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/body.css">
</head>

<body>
  <div class="container">
    <section id="content">
      <form autocomplete="off">
        <h1>账号登录</h1>
        </h1>
        <div>
          <i class="close">X</i>
          <input type="text" placeholder="手机号" id="username">
          <p></p>
        </div>
        <div>
          <i class="close">X</i>
          <input type="password" placeholder="密码" id="password">
          <p></p>
        </div>
        <div>
          <input type="submit" value="登录" class="btn btn-primary" id="js-btn-login">
          <a href="">忘记密码?</a>
          <a href="#">注册账号</a>
        </div>
      </form>
    </section>
  </div>
  <style>

  </style>
  <script>
    // 获取元素
    const username = document.querySelector('#username')
    const password = document.querySelector('#password')

    // 用户输入事件
    username.addEventListener('input', function () {
      this.previousElementSibling.style.display = 'block'
      this.previousElementSibling.addEventListener('click', function () {
        username.value = ''
        this.style.display = 'none'
        document.querySelector('div:first-child p').innerHTML = ''
      })
    })

    password.addEventListener('input', function () {
      this.previousElementSibling.style.display = 'block'
      this.previousElementSibling.addEventListener('click', function () {
        password.value = ''
        this.style.display = 'none'
        document.querySelector('div:nth-child(3) p').innerHTML = ''
      })
    })


    username.addEventListener('change', verifyName)
    function verifyName() {
      // 正则
      const reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/

      if (!reg.test(username.value)) {
        if(!username.value.trim()) {
          document.querySelector('div:first-child p').innerHTML = '请输入手机号'
          return false
        }
        document.querySelector('div:first-child p').innerHTML = '格式不正确'
        return false
      }

      document.querySelector('div:first-child p').innerHTML = ''

      return true
    }


    //密码校验
    password.addEventListener('change', verifyPwd)
    function verifyPwd() {
      // 定义规则
      const reg = /^\d{6,}$/
      // 判断是否匹配
      // console.log(reg.test(this.value))
      if (!reg.test(password.value)) {
        if(!password.value.trim()) {
          document.querySelector('div:nth-child(3) p').innerHTML = '请输入密码'
          return false
        }
        document.querySelector('div:nth-child(3) p').innerHTML = '格式不正确'
        return false
      }
      // 清空提示
      document.querySelector('div:nth-child(3) p').innerHTML = ''
      return true
    }

    // 提交校验
    const form = document.querySelector('form')
    form.addEventListener('submit', function (e) {
      // 阻止表单默认提交事件
      e.preventDefault()
      // 调用校验函数
      const re1 = verifyName()
      const re2 = verifyPwd()
      if (!(re1 && re2)) {
       return  alert('校验不通过')
      }
      alert(`
      登录成功
      用户名是${username.value}，密码是${password.value}
      `)
    })
  </script>
</body>

</html>